/* * @index.vue * @description：用户手动创建词库 * @author lxj * @update (lxj 2023/12/4) */
<template>
  <div>
    <!-- 提示区域 -->
    <div v-show="create">
      <el-alert title="创建词库" type="success" center show-icon :closable="false"></el-alert>

      <el-tabs v-model:model-value="activeNames" @tab-click="handleClick" class="upload">
        <el-tab-pane label="在线添加" name="first">
          <el-input
            type="textarea"
            :rows="2"
            placeholder="请输入内容"
            v-model="newWords"
          ></el-input>
          <el-divider></el-divider>
          <p>提示：请逐行输入要创建的关键词，可以一次输入多个关键词。</p>
        </el-tab-pane>
        <el-tab-pane label="上传文件" name="second">
          <el-upload
            class="upload-demo"
            drag
            action="https://jsonplaceholder.typicode.com/posts/"
            multiple
          >
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
          </el-upload>
        </el-tab-pane>
      </el-tabs>
      <el-button @click="sumbitWords">提交</el-button>
    </div>

    <div v-show="!success && !create">
      <el-result icon="success" title="创建成功" subTitle="点击返回进行查询">
        <template v-slot:extra>
          <el-button type="primary" size="medium" @click="myWord">查看词库</el-button>
        </template>
      </el-result>
    </div>

    <!--    动态显示类别-->
    <div v-show="success">
      <h3>个人名词库</h3>
      <div class="flex-container">
        <el-button v-for="(item, index) in myWords" :key="index" class="box-card" type="text">
          {{ item.noun }}
        </el-button>
      </div>
    </div>
  </div>
</template>

<script>
  import axios from 'axios';
  import error from '@icon-park/vue-next/lib/icons/Error';
  export default {
    data() {
      return {
        activeIndex: 0,
        activeNames: 'first',
        create: true,
        success: false,
        backShow: true,
        newWords: ' ',
        myWords: [],
      };
    },
    methods: {
      handleClick(tab, event) {
        console.log(tab, event);
      },
      myWord() {
        axios({
          method: 'get',
          url: 'http://127.0.0.1:4523/m1/3571383-0-default/api/properwords/private/all',
        })
          .then((res) => {
            console.log('请求成功');
            console.log(res.data.data);
            this.myWords = res.data.data;
            this.success = true;
          })
          .catch((error) => {
            console.log('请求失败');
            console.log('error');
            this.success = false;
          });
      },
      sumbitWords() {
        let obj = [];
        let params = {};
        obj = this.newWords.split(/[(\r\n)\r\n]+/);
        let object = obj.reduce((result, item, index) => {
          result[index] = item;
          return result;
        }, {});
        // 获取用户id
        params['user_id'] = '1111';
        params['proper_words'] = obj;
        console.log(params);
        axios({
          method: 'post',
          url: '',
          data: params,
          headers: {
            'Content-Type': 'application/json;charset=utf-8',
          },
        })
          .then((res) => {
            console.log('请求成功');
            console.log(res);
            this.create = false;
            this.success = false;
          })
          .catch((error) => {
            console.log('请求失败');
            console.log('error');
            this.create = false;
            this.success = false;
          });
      },
    },
  };
</script>

<style lang="css" scoped>
  .upload {
    margin-bottom: 2em;
  }
  .flex-container {
    display: flex;
    flex-wrap: wrap;
  }

  .box-card {
    flex: 1 0 auto;
    margin: 10px;
    padding: 20px;
    border: 1px solid black;
  }
  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: '';
  }
  .clearfix:after {
    clear: both;
  }

  .box-card {
    width: 480px;
  }
</style>
